<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.css" rel="stylesheet"/>
    <script type="text/javascript" charset="utf-8">
      	mui.init();
    </script>
	
	<!-- 样式 -->
	<style>
		.logo_img img{
			width: 100px;height: 100px;
			border-radius: 50%; /* 圆角 */
			display: block; /* 变成块元素,才能使用margin */
			margin:200px auto 20px;
		}
		
	</style>
	
	
</head>
<body>
	
	<!-- 页面的标题 -->
	<header class="mui-bar mui-bar-nav">
		<h1 class="mui-title">2404相亲相爱一家人</h1>
	</header>
	
	
	
	<!-- 页面内容 -->
	<div class="mui-content">
		<div class="logo_img">
			<img src="img/logo.jpeg" alt="" />
		</div>
		<form class="mui-input-group">
		    <div class="mui-input-row">
		        <label>用户名</label>
		    <input type="text" class="mui-input-clear" placeholder="请输入用户名">
		    </div>
		    <div class="mui-input-row">
		        <label>密码</label>
		        <input type="password" class="mui-input-password" placeholder="请输入密码">
		    </div>
		    <div class="mui-button-row">
		        <button type="button" class="mui-btn mui-btn-primary btn" >登录</button>
		    </div>
		</form>
		
	</div>
	
	<script>
		
		mui(document.body).on('tap','.btn',function(){
			
			mui('.btn').button('loading');
			
			mui.openWindow({
			    url:'首页.html'
			});
			
			
		})
		
		
		
		
		
		
		
	</script>
	
	
	
	
	
	
	
</body>
</html>